<!doctype html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
    <head th:replace="~{commons/common::dom-head('帖子详情')}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>
        <!-- 自定义 CSS -->
        <link rel="stylesheet" th:href="@{/static/css/common.css}" href="../../../static/css/common.css">
        <title>帖子详情</title>
    </head>
    <body>
        <div class="header bg-light mb-3 shadow-sm" th:replace="~{commons/common::navbar(1)}">
            <nav class="navbar navbar-expand-lg navbar-light bg-light container">
                <a th:href="@{/}" class="navbar-brand" href="#">我的论坛</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a th:href="@{/}" class="nav-link" href="#">首页 <span
                                    class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item" th:if="${session.USER != null}">
                            <a class="nav-link" href="#" th:href="@{/u/message/add}">新增</a>
                        </li>
                    </ul>
                    <a th:if="${session.USER == null}" th:href="@{/login}"
                       class="text-decoration-none text-primary">请登录</a>
                    <div class="nav-item dropdown" th:if="${session.USER != null}">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-user"></i>
                            <span class="text-primary" th:text="${session.USER.name}">用户名</span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">个人中心</a>
                            <button id="logoutBtn" class="dropdown-item"><i class="fas fa-power-off"></i> 注销</button>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="content my-2">
            <div class="container">
                <!-- 返回版面 -->
                <div class="card">
                    <div class="card-body">
                        <a th:href="@{/}" class="text-primary"><i class="far fa-hand-point-left"></i> 返回版面</a>
                    </div>
                </div>
                <!-- 楼主信息 -->
                <div class="card bg-light border-0">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-1">
                                <img th:if="${message.user.thumb != null && message.user.thumb != ''}"
                                     th:src="${message.user.thumb}"
                                     src="../../../static/img/user.jpg" class="img-thumbnail mx-2" alt="thumb"
                                     width="50px"/>
                                <img th:if="${message.user.thumb == null || message.user.thumb == ''}"
                                     th:src="@{/static/img/user.jpg}"
                                     src="../../../static/img/user.jpg" class="img-thumbnail mx-2" alt="thumb"
                                     width="50px"/>
                            </div>
                            <div class="col-md-11">
                                <div th:text="${message.user.name}" class="font-weight-bold">ajun</div>
                                <div class="text-muted">
                                    <span class="small mr-2 badge badge-primary">楼主</span>
                                    <span th:text="${#dates.format(message.timeUpdate, 'yyyy-MM-dd HH:mm')}"
                                          class="small mx-2">2020-5-28 10:50</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 帖子信息 -->
                <div class="card">
                    <div class="card-body">
                        <span th:if="${message.topFlag > 0}" class="badge badge-danger">顶</span>
                        <span th:if="${message.niceFlag > 0}" class="badge badge-warning text-white">精</span>
                        <hr>
                        <p th:text="${message.content}" class="font-weight-light text-wrap text-break m-3"
                           style="line-height: 2rem">
                            身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui
                            偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。拥有双面的不仅是人生，还有
                            layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。
                        </p>
                        <div class="p-3 text-center">
                            <a class="" th:if="${message.img1.length() > 0}" th:href="${message.img1}"
                               target="_blank">
                                <img th:src="${message.img1}" src="../../../static/img/user.jpg"
                                     class="img-fluid rounded mx-auto my-3" alt="attachment">
                            </a>
                            <br>
                            <a class="" th:if="${message.img2.length() > 0}" th:href="${message.img2}"
                               target="_blank">
                                <img th:src="${message.img2}" src="../../../static/img/user.jpg"
                                     class="img-fluid rounded mx-auto my-3" alt="attachment">
                            </a>
                            <br>
                            <a class="" th:if="${message.img3.length() > 0}" th:href="${message.img3}"
                               target="_blank">
                                <img th:src="${message.img3}" src="../../../static/img/user.jpg"
                                     class="img-fluid rounded mx-auto my-3" alt="attachment">
                            </a>
                        </div>
                        <div class="mt-3 float-right">
                            <span class="text-muted">
                                共
                                <span class="text-warning" style="font-size: 24px" th:text="${pageInfo.total}">10</span>
                                条回复
                            </span>
                            <!-- common user -->
                            <div th:if="${session.USER != null && message.creator.intValue() == session.USER.id}"
                                 class="d-inline-block dropdown user-actions ml-3">
                                <button class="btn btn-primary btn-sm dropdown-toggle" type="button"
                                        id="userOptBtn" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                    操作
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a href="javascript:void(0)" class="dropdown-item">
                                        <i class="fas fa-edit"></i> 编辑
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="javascript:void(0)" class="dropdown-item text-danger"
                                       onclick="setUserFlag('del', 'back')">
                                        <i class="fas fa-trash"></i> 删帖
                                    </a>
                                </div>
                            </div>
                            <!-- admin -->
                            <div th:if="${session.USER != null && session.USER.isAdmin != null && session.USER.isAdmin}"
                                 class="d-inline-block dropdown user-actions ml-3">
                                <button class="btn btn-info btn-sm dropdown-toggle" type="button"
                                        id="adminOptBtn" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                    管理
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a href="javascript:void(0)" class="dropdown-item"
                                       onclick="adminSetUserFlag('top', 'reload', '确定置顶/取消置顶该贴吗？')">
                                        <i class="fas fa-hand-point-up text-muted"></i>
                                        <span th:if="${message.topFlag == 0}">置顶</span>
                                        <span th:if="${message.topFlag > 0}">取消置顶</span>
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="javascript:void(0)" class="dropdown-item"
                                       onclick="adminSetUserFlag('nice', 'reload', '确定给该贴加精/取消加精吗？')">
                                        <i class="fas fa-thumbs-up text-muted"></i>
                                        <span th:if="${message.niceFlag == 0}">加精</span>
                                        <span th:if="${message.niceFlag > 0}">取消加精</span>
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="javascript:void(0)" class="dropdown-item"
                                       onclick="adminSetUserFlag('del', 'back', '确定删除该贴吗？')">
                                        <i class="fas fa-trash text-danger"></i> 删除
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 帖子回复 -->
                <!-- 请先登录 -->
                <div th:if="${session.USER} == null" class="list-group-item text-muted">
                    <span class="align-middle d-inline text-warning">
                        请先<a id="go-login-link" href="javascript:void(0)"
                             class="btn-link text-decoration-none"> 登录 </a>才可发表回复
                    </span>
                </div>
                <div id="replyPane" class="card mt-1">
                    <div class="card-body">
                        <div th:if="${session.USER} != null">
                            <div class="row edit my-3">
                                <textarea id="replyContent" placeholder="请输入回复"></textarea>
                            </div>
                            <div class="row-cols-2 mb-5 clearfix">
                                <div class="float-right">
                                    <button id="replyBtn" class="btn btn-primary">回复</button>
                                </div>
                            </div>
                            <hr>
                        </div>
                        <div th:each="reply, stat : ${pageInfo.list}">
                            <div class="row">
                                <div class="col-sm-2 bg-light">
                                    <div class="my-2 text-center">
                                        <img th:if="${reply.user.thumb != null && message.user.thumb != ''}"
                                             th:src="${reply.user.thumb}" src="../../../static/img/user.jpg"
                                             class="img-thumbnail align-middle" alt="thumb" width="75px"/>
                                        <img th:if="${message.user.thumb == null || message.user.thumb == ''}"
                                             th:src="@{/static/img/user.jpg}" src="../../../static/img/user.jpg"
                                             class="img-thumbnail align-middle" alt="thumb" width="75px"/>
                                        <div th:text="${reply.user.name}"
                                             class="text-primary font-weight-light text-center">ajun
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <span th:text="${reply.content}">写的真不错，你这个Layui教程还不错!</span>
                                    <span class="text-muted" style="position: absolute; bottom: 0; right: 0;">
                                        <span th:if="${reply.user.name==message.user.name}" class="badge badge-primary">
                                            楼主
                                        </span>
                                        <span th:text="${baseIndex + stat.count}">一</span>楼
                                        <span th:text="${#dates.format(reply.timeCreate, 'yyyy-MM-dd HH:mm')}"
                                              class="mx-4">
                                            2020-5-28 11:11
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <hr>
                        </div>
                        <div class="pager float-right" th:if="${pageInfo.pages} > 1">
                            <nav aria-label="Page navigation" th:object="${pageInfo}">
                                <ul class="pagination justify-content-center">
                                    <li class="page-item" th:classappend="*{hasPreviousPage} ? '' : 'disabled'">
                                        <a class="page-link" th:if="*{prePage > 0}"
                                           th:href="@{/message/detail(msgId=${message.id}, pageNum=*{pageNum}-1)}"
                                           aria-label="Previous" aria-disabled="true" href="#">上一页</a>
                                        <a class="page-link" th:if="*{prePage <= 0}"
                                           th:href="@{/message/detail(msgId=${message.id}, pageNum=1)}"
                                           aria-label="Previous" aria-disabled="true" href="#">上一页</a>
                                    </li>
                                    <li class="page-item" th:each="num : *{#numbers.sequence(from, to)}"
                                        th:classappend="(${num} == *{pageNum}) ? 'active' : ''">
                                        <a th:href="@{/message/detail(msgId=${message.id}, pageNum=${num})}"
                                           th:text="${num}" class="page-link" href="#">1</a>
                                    </li>
                                    <li class="page-item" th:classappend="*{hasNextPage} ? '' : 'disabled'">
                                        <a th:if="*{nextPage < pages}"
                                           th:href="@{/message/detail(msgId=${message.id}, pageNum=*{pageNum}+1)}"
                                           aria-disabled="true" class="page-link" href="#">下一页</a>
                                        <a th:if="*{nextPage >= pages}"
                                           th:href="@{/message/detail(msgId=${message.id}, pageNum=*{pages})}"
                                           aria-disabled="true" class="page-link" href="#">下一页</a>
                                    </li>
                                </ul>
                                <div class="text-primary text-center">
                                    <span>第 <span th:text="*{pageNum}">1</span> 页</span>
                                    /
                                    <span>共 <span th:text="*{pages}">10</span> 页</span>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" th:replace="~{commons/common::footer}">
            <hr>
            <div class="text-center">
                <p class="small text-muted m-0">
                    <span id="span"></span> | All Right Reserved © 2020 Designed by AJun
                </p>
                <a class="text-decoration-none text-muted small m-0" target="_blank"
                   href="http://www.beian.miit.gov.cn/">
                    备案号: 陕ICP备19017955号
                </a>
            </div>
            <script type="text/javascript">
                function runtime() {
                    // 初始时间，日/月/年 时:分:秒
                    X = new Date("5/30/2020 12:28:00");
                    Y = new Date();
                    T = (Y.getTime() - X.getTime());
                    M = 24 * 60 * 60 * 1000;
                    a = T / M;
                    A = Math.floor(a);
                    b = (a - A) * 24;
                    B = Math.floor(b);
                    c = (b - B) * 60;
                    C = Math.floor((b - B) * 60);
                    D = Math.floor((c - C) * 60);
                    //信息写入到DIV中
                    span.innerHTML = "小站已勉强运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
                }

                setInterval(runtime, 1000);
            </script>
        </div>

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/static/js/bootstrapQ.js}" src="../../static/js/bootstrapQ.js"></script>
        <script th:inline="javascript">
            /* 请先登录 */
            $('#go-login-link').click(function () {
                let loginUri = /*[[@{/login}]]*/'';
                location.href = loginUri + '?ret=' + location.href;
            });

            /* 用户注销 */
            $('#logoutBtn').click(function () {
                $.ajax({
                    url: /*[[@{/logout.do}]]*/'',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            location.href = /*[[@{/}]]*/'';
                        }
                    },
                    error: function () {
                        bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                    }
                });
            });

            /* 保存回复 */
            $('#replyBtn').click(function () {
                let replyContent = $('#replyContent');

                let req = {};
                req.msgId = /*[[${message.id}]]*/'';
                req.title = '';
                req.content = $.trim(replyContent.val());
                if ($.trim(replyContent.val()).length < 3) {
                    bootstrapQ.msg({msg: '需输入3字符以上', type: 'warning', time: 2000});
                    return;
                }
                if (req.title.length === 0) {
                    req.title = req.content.substring(0, 30);
                    req.title = req.title.replace(/\\n/g, '');
                }

                $.ajax({
                    url: /*[[@{/u/message/reply/add.do}]]*/'',
                    method: 'POST',
                    data: JSON.stringify(req),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            location.reload();
                        } else {
                            location.href = /*[[@{/login}]]*/'';
                        }
                    },
                    error: function () {
                        bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                    }
                });
            });

            /* 用户操作: 删除自己的帖子 */
            function setUserFlag(cmd, action) {
                let req = {};
                // 该帖子的 id
                req.msgId = /*[[${message.id}]]*/'';
                req.cmd = $.trim(cmd); // 操作命令
                action = $.trim(action);

                bootstrapQ.confirm({
                    id: 'delModel',
                    title: '提示',
                    msg: '确认删除该贴吗？',
                    backdrop: 'true'
                }, function () {
                    $.ajax({
                        url: /*[[@{/u/message/setUserFlag.do}]]*/'',
                        method: 'POST',
                        data: JSON.stringify(req),
                        dataType: 'json',
                        contentType: 'application/json;charset=utf-8',
                        processData: false,
                        success: function (resp) {
                            if (resp.success) {
                                if (action === 'reload') {
                                    location.reload();
                                } else if (action === 'back') {
                                    location.href = /*[[@{/}]]*/'';
                                }
                            } else {
                                bootstrapQ.msg({msg: resp.message, type: 'warning', time: 2000});
                            }
                        },
                        error: function () {
                            bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                        }
                    });
                });
            }

            /* 管理员操作: 置顶、加精、删除 */
            function adminSetUserFlag(cmd, action, msg) {
                let req = {};
                // 该帖子的 id
                req.msgId = /*[[${message.id}]]*/'';
                req.cmd = $.trim(cmd); // 操作命令
                action = $.trim(action);

                bootstrapQ.confirm({
                    id: 'delModel',
                    title: '提示',
                    msg: msg,
                    backdrop: 'true'
                }, function () {
                    $.ajax({
                        url: /*[[@{/u/message/adminSetUserFlag.do}]]*/'',
                        method: 'POST',
                        data: JSON.stringify(req),
                        dataType: 'json',
                        contentType: 'application/json;charset=utf-8',
                        processData: false,
                        success: function (resp) {
                            if (resp.success) {
                                if (action === 'reload') {
                                    location.reload();
                                } else if (action === 'back') {
                                    location.href = /*[[@{/}]]*/'';
                                }
                            } else {
                                bootstrapQ.msg({msg: resp.message, type: 'warning', time: 2000});
                            }
                        },
                        error: function () {
                            bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                        }
                    });
                });
            }
        </script>
    </body>
</html>